<!DOCTYPE html>
<html lang="zh-CN">

<head>

  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

  <title>37 - 拆分图文卡片 (HTML+CSS)</title>

  <link rel="stylesheet" href="./css/index.css">

</head>

<body>

  <!-- 父盒子，主要用来居中显示 -->
  <div class="box">
    <!-- 卡片整体盒子 --color是图文对应主题的颜色变量，文字颜色过渡动画使用 -->
    <div class="card" style="--color: #0d9545;">
      <img src="./image/山.jpeg" alt="山">

      <div class="text-box">
        <h2>山</h2>
        <p>
          远山如画，层峦叠翠。云雾缥缈，神秘莫测。树木随季变色，春绿秋红冬白。溪流清澈波光，与山相映成趣。
        </p>
      </div>
    </div>

    <div class="card" style="--color: #45b9dd;">
      <img src="./image/海.jpeg" alt="海">

      <div class="text-box">
        <h2>海</h2>
        <p>
          海面如镜，蓝天相映。风帆如鸽，自由翱翔。沙滩如绸，贝壳珊瑚点缀。鱼儿如花，水中彩绘美景。
        </p>
      </div>
    </div>
  </div>

</body>

</html>